<!DOCTYPE html>
<html>
<!--
    Exchange the line above for this to enable offline support
    <html manifest="manifest.appcache">

-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>-->
    <link rel="stylesheet" type="text/css" href="css/base.css"/>

    <title>Firefox OS image filters app</title>
</head>

<body>

<!--<header>
</header>-->

<div class="container custom-container">



    <ul class = "layout-list">
        <li>
            <div class="top-nav">
                <div class="flat-btn-container">
                    <a href="#" id="#menu" class="show-filter shake">
                        <div class='switch'>
                            <div class='menu'></div>
                        </div>
                    </a>
                    <a href="#" id="pick-image" class="show-pick-image shake">Pick</a>
                    <a href="#" id="show-download-image" class="show-download-image shake" target="_blank" download="photo.png">Save</a>
                    <a href="#" class="show-info">Info</a>
                </div>
            </div>

        </li>
        <li class = "filter-li">
            <div id="filterContainer">
                <ul id="filters">
                    <li> <a href="#" id="normal">normal</a></li>
                    <li> <a href="#" id="vintage">Vintage</a> </li>
                    <li> <a href="#" id="lomo">lomo</a> </li>
                    <li> <a href="#" id="clarity">clarity</a> </li>
                    <li> <a href="#" id="sinCity">sin city</a> </li>
                    <li> <a href="#" id="sunrise">sunrise</a> </li>
                    <li> <a href="#" id="crossProcess">cross process</a> </li>
                    <li> <a href="#" id="orangePeel">orange peel</a> </li>
                    <li> <a href="#" id="love">love</a> </li>
                    <li> <a href="#" id="grungy">grungy</a> </li>
                    <li> <a href="#" id="jarques">jargues</a> </li>
                    <li> <a href="#" id="pinhole">pinhole</a> </li>
                    <li> <a href="#" id="oldBoot">old boot</a> </li>
                    <li> <a href="#" id="glowingSun">glowing sun</a> </li>
                    <li> <a href="#" id="hazyDays">lazy days</a> </li>
                    <li> <a href="#" id="herMajesty">her majesty</a> </li>
                    <li> <a href="#" id="nostalgia">nostalgia</a> </li>
                    <li> <a href="#" id="hemingway">hemingway</a> </li>
                    <li> <a href="#" id="concentrate">concentrate</a> </li>
                </ul>
            </div>
        </li>
        <li class = "main-li">
            <!-- do not remove line breaks from source, as it has definec white-space: pre-line; on splash-text -->
            <div class="splash-div splash-intro">
                <span class="splash-text"><span id="pick-image-sec" class="type1">Pick</span>
                    image, go to
                    <span class="type2">menu</span>
                    and add
                    <span class="type3">filters</span>
                    <span class="smiley1 swing animated">;)</span>
                </span>
            </div>
            
            <div class="splash-div splash-wait-anim">
                <span class="splash-text"><span class="type1">please</span>
                    be patient
                    <span class="type2">just</span>
                    few
                    <span class="type3">seconds</span>
                    <span class="smiley1 swing animated">:)</span>
                </span>
            </div>
            <div class="splash-div splash-download-image">
                <span class="splash-text"><span class="type1">my name is</span>
                    <span id="pic-name-holder"></span>
                    <span class="type3"><a href="#" class="download-image" target="_blank" download="photo.png">save me</a></span>
                    <span class="smiley1 swing animated">:)</span>
                </span>
            </div>

            <div id="photo-container">
                <div id="photo">
                </div>
            </div>
        </li>
        <li class = "info-li">
            <div id="info_container">
                <span id="info-splash-text" class="splash-text"><span class="type1">Hi to you</span>
                    I developed this ap for testing purposes. I have been working on Firefox OS just for two days. I used a lot of ready code, caman.js for processing images, and Firefox OS boilerplate, for kick-start. If you have any question feel free to contact me at <em>bmmarko@live.com</em>
                    Application is tested on Geeksphone Keon with Firefox OS, provided by <a href="http://www.telenor.me">Telenor</a>
                    <span class="smiley1 swing animated">:D</span>
                </span>
            </div>
        </li>

    </ul>
</div>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/jquery.transit.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/caman.full.js"></script>
<script type="text/javascript" src="js/webapp.js"></script>
<script type="text/javascript" src="js/offline.js"></script>

<!--
    Loosely based on fxosstub: https://github.com/Jaxo/fxosstub
    Loosely based on Firefox-OS-Boilerplate-App: https://github.com/robnyman/Firefox-OS-Boilerplate-App
-->

</body>
</html>